import { FC, ReactNode, useContext } from 'react';
import { Tooltip, Upload as AntdUpload } from 'antd';

import Icons from '@components/Icons';
import Button from '@components/Button';

import type { RbUploadProps } from './RbUploadProps';
import RbUploadStore, { RbUploadStoreProvider } from './stores/UploadStore';
import styles from './index.module.less';

const RbUploadPage: FC<{ children?: ReactNode }> = ({ children }) => {
  const { action, accept, multiple, disabled } = useContext(RbUploadStore);

  return (
    <div className={styles.rbUploadWapper}>
      <AntdUpload
        action={action}
        accept={accept}
        multiple={multiple}
        disabled={disabled}
        listType="picture-card"
        showUploadList={false}
      >
        {children || (
          <div className={styles.rbUploadSelectButtonWapper}>
            <Icons className={styles.rbUploadSelectButtonIcons} type="FolderFilled" />
            <Tooltip
              color="white"
              title={accept ? <div style={{ color: 'black' }}>{accept}</div> : null}
            >
              <div className={styles.rbUploadSelectButtonText}>点击或将文件拖拽至此处上传</div>
            </Tooltip>
          </div>
        )}
      </AntdUpload>
      <Button onClick={() => {}}>上传</Button>
    </div>
  );
};

const RbUpload: FC<RbUploadProps> = ({ children, ...rest }) => {
  return (
    <RbUploadStoreProvider {...rest}>
      <RbUploadPage>{children}</RbUploadPage>
    </RbUploadStoreProvider>
  );
};

export default RbUpload;
